<template>
    <div class="detail">
        
            <van-nav-bar title="课程详情" left-text="返回"  left-arrow @click-left="$router.push('/index')"
            />
        <div class="top">
            <p>{{courseList.info.title}}</p>
            <span>{{courseList.info.price}}</span>
            <div class="cc">共{{courseList.info.total_periods}}课时|{{courseList.info.browse_num}}人已报名</div>
        </div>
        <div class="rw">
            <p>教学团队</p>
            <div class="con" v-for="(ele,ind) in courseList.teachers" :key="ind">
                <img :src="ele.avatar" alt="">
                <span>{{ele.teacher_name}}</span>
            </div>
        </div>
        <div class="js">
         <p>课程介绍</p>
          <span>{{courseList.info.course_statement}}</span>
        </div>
        <div class="dg">
        <p>课程大纲</p>
        <span>{{courseList.info.course_statement}}</span>
        </div>
    </div>
</template>

<script>
import { getcourseInfo } from "../http/banner"
export default {
 data(){
    return {
     courseList:[],
     id:""
    }
 },
 created (){
     this.id = this.$route.query.id
     console.log(this.id);
     this.getcourseInfo()
 },
 methods:{
     async getcourseInfo(){
         let res = await getcourseInfo(this.id)
        //  console.log(res);
         this.courseList=res.data
         console.log(this.courseList);
     }
 }
}
</script>

<style lang="scss">
.detail{
    background-color: #eee;
}
.top{
    display: flex;
    flex-direction: column;
   background-color: #fff;
   margin-bottom: 20px;
   line-height: 40px;
   p{
    font-size: 16px;
   }
   span{
    color: orange;
    font-size: 12px;
   }
   .cc{
    font-style: 12px;
    color: #999;
   }
}
.rw{
    background-color: #fff;
    line-height: 40px;
    margin-bottom: 15px;
    p{
        font-size: 16px;
    }
    .con{
      display: flex;
       align-items: center;
        img{
            width: 35px;
            height: 35px;
            border-radius: 50%;
        }
    }
}
.js{
    background-color: #fff;
    margin-bottom: 15px;
    line-height: 30px;
    p {
            font-size: 16px;
    }
    span{
       font-size: 12px;
    }
}
.dg{
    background-color: #fff;
    margin-bottom: 15px;
        line-height: 30px;
    
        p {
            font-size: 16px;
        }
    
        span {
            font-size: 12px;
        }
}
</style>
